import React, { Component, PropTypes } from 'react';
import { connect } from 'dva';
import { Link } from 'dva/router';
import styles from './alert.less';
import VtxAlert from '../components/vtxAlert';
import {VtxMessage} from '../components/vtxMessage';
import {VtxNotification} from '../components/vtxNotification';
import {Sider} from './menu';
function Alert() {
  function onClose(){
    /*alert('关闭回调')*/
    VtxMessage.success('关闭回调成功');
    VtxNotification.open({
      message:'hello,我是弹出框',
      description:'我是通知提醒详细内容'
    });
  }
  let style={
    background:'green',
    color:'#fff'
  }
  return (
    <div>
      <div className={styles.normal}>
        <h1>Welcome to dva!</h1>
        <hr />
        <ul className={styles.list}>
          <li>alert的demo往四周看</li>
        </ul>
      </div>
        <VtxAlert 
          message='中心显示,样式自定义' 
          description='placement表示方位，方位为首字母拼接，如左上：TL，默认不填就是居中' 
          vtxStyle={style}/>
        <VtxAlert 
          type='error' 
          banner 
          message='含有icon TR' 
          placement='TR'/>
        <VtxAlert 
          type='success' 
          banner 
          message='含有icon TC' 
          placement='TC'/>
        <VtxAlert type='info' 
          banner 
          message='hello,我蹦出来咯 TL' 
          onClose={onClose} 
          closable={true} 
          placement='TL'/>
        <VtxAlert 
          type='info' 
          banner 
          showIcon={false}
          message='隐藏icon,并且关闭回调 BL' 
          onClose={onClose} 
          closable={true} 
          placement='BL'/>
        <VtxAlert 
          type='info' 
          banner 
          message='含有icon,并且关闭回调 BR' 
          onClose={onClose} 
          closable={true} 
          placement='BR'/>
        <VtxAlert 
          type='success' 
          banner 
          message='含有icon,并且关闭回调 BC' 
          onClose={onClose} 
          closable={true} 
          placement='BC'/>
        <VtxAlert 
          type='info' 
          banner 
          message='含有icon,并且关闭回调 LB' 
          description='含有banner就会有icon,若想关闭，则设置showIcon为false' 
          onClose={onClose} 
          closable={true} 
          placement='LB'/>
        <VtxAlert 
          type='warning' 
          banner 
          description='type一共分为四种，warning、info、success、error,比如warning就是现在这个状态'
          message='含有icon,并且关闭回调 LC' 
          onClose={onClose} 
          closable={true} 
          placement='LC'/>
        <VtxAlert 
          type='info' 
          banner 
          message='含有icon,并且关闭回调 LT' 
          description='关闭按钮可以自定义，可以改变closeText,可以直接传递字符串或使用dom标签，生成新按钮，closable可以不需设置'
          onClose={onClose} 
          closeText={<p>这是用p标签包裹的文字</p>} 
          placement='LT'/>
        <VtxAlert 
          type='info' 
          banner 
          message='含有icon,并且关闭回调 RT' 
          onClose={onClose} 
          closable={true} 
          placement='RT'/>
        <VtxAlert 
          type='info' 
          banner 
          message='含有icon,并且关闭回调 RC' 
          onClose={onClose} 
          closable={true} 
          placement='RC'/>
        <VtxAlert 
          type='info' 
          banner 
          message='hello,我是右下角 RB' 
          onClose={onClose} 
          closable={true} 
          placement='RB'/>
    </div>
  );
}

Alert.propTypes = {
};

export default connect()(Alert);
